<template>
  <div>
    <el-container>
      <el-main>
        <kendoForm
          :kendo-form-items="kendoFormItems"
          :kendo-form="kendoForm"
          :kendo-params-value="kendoParamsValue"
        />
      </el-main>
    </el-container>
    <el-container style="padding-left:5px">
      <el-main>
        <KendoGridCmpt
          :ref="'ReqTestGrid'"
          :table-grid-option="tableGridOption"
          :table-grid-data-source-option="tableGridDataSourceOption"
          :table-grid-toolbar="tableGridToolbar"
          @persistSelection="selectDataItems"
        />
      </el-main>
    </el-container>
  </div>

</template>

<script>
  import kendoForm from '@/Views/components/kendo-vue-component/kendoForm/index.vue'
  export default {
    name: 'PrjReqTaskManage',
    components: {
      kendoForm
    },
    data() {
      return {
        /* Form*/
        kendoFormItems: [
          {
            name: 'reqNo',
            label: '关联业务编号',
            paramName: 'reqNo',
            required: false,
            controlType: 'multicolumncombobox',
            dataSource: 'PrjReqTaskDataSource',
            dataType: 'json',
            autoBind: false,
            transportReadUrl: '/service/prjMng/reqmntTaskMng/findReqMntTaskList',
            dataMapping: {
              label: 'reqName',
              value: 'reqNo'
            },
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            },
            column: [
              {
                field: 'reqNo',
                title: '需求编号',
                width: 180
              },
              {
                field: 'reqName',
                title: '需求名称',
                width: 320
              }
            ]
          },
          {
            name: 'devInCharge',
            label: '开发负责人',
            paramName: 'devInCharge',
            viewDisabled: true,
            controlType: 'multicolumncombobox',
            dataSource: 'PrjMemberDataSource',
            dataType: 'json',
            selectMultiple: true,
            autoBind: false,
            transportReadUrl: '/service/prjMng/prjMemberMng/findPrjMemberList',
            dataMapping: {
              label: 'memberName',
              value: 'memberNo'
            },
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            },
            column: [
              {
                field: 'relPrjNo',
                title: '所属项目',
                width: 180
              },
              {
                field: 'memberNo',
                title: '项目成员编号',
                width: 120
              },
              {
                field: 'memberName',
                title: '项目成员编号',
                width: 120
              }
            ]
          },
          {
            ref: 'CURRENT_GENERATION_CD',
            remoteData: true,
            cascade: true,
            name: 'currentGeneration',
            label: '当前阶段',
            paramName: 'currentGeneration',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            autoBind: true,
            schema: {
              data: function(response) {
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'CURRENT_GENERATION_CD' })
              }
            }
          }
        ],
        kendoForm: {
          ref: 'prjForm',
          valid: 'valid',
          buttons: [
            {
              name: '查询', // 按钮内容
              class: 'k-primary', // 按钮样式
              icon: 'search',
              click: this.search
            },
            {
              name: '重置', // 按钮内容
              icon: 'reset-sm', // 按钮样式
              click: this.reset
            }
          ]
        },
        kendoParamsValue: {
          reqNo: '',
          currentGeneration: '',
          devInCharge: ''
        },
        tableGridToolbar: [
          {
            text: '维护测试案列',
            class: 'k-primary',
            icon: 'edit',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/requirementtestmng/testcase/index.vue',
              dialogTitle: '测试案列',
              parameterMap: {}
            },
            /**
             * @description 操作类型 add (新增) update(修改) del(删除) view(查看)
            */
            operatorType: 'edit'
          },
          {
            text: '查看测试案例台账',
            class: 'k-primary',
            icon: 'file-txt',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/requirementtestmng/testcase/standingbook.vue',
              dialogTitle: '测试案列',
              parameterMap: {}
            },
            /**
             * @description 操作类型 add (新增) update(修改) del(删除) view(查看)
            */
            operatorType: 'edit'
          }
        ],
        // maintain 需求信息数据列表
        tableGridOption: {
          ref: 'ReqTestGrid',
          dataSourceRef: 'reqTestDataSource',
          remoteData: true,
          editable: 'inline',
          sortable: true,
          reorderable: true,
          resizable: true,
          pageable: true,
          selectSingle: true,
          selectMultiple: false,
          toolbar: ['excel', 'pdf', 'create', 'save', 'cancel'],
          excel: {
            fileName: '需求测试总进度跟踪表',
            allPages: true,
            filterable: true
          },
          columns: [
            {
              field: 'reqNo',
              title: '需求名称',
              width: 250,
              dictData: 'TASK_REQ_NO_CD',
              editor: this.reqNoEditor
            },
            {
              field: 'testMemberNo',
              title: '测试成员',
              width: 120,
              dictData: 'MEMBER_NO_CD',
              editor: this.testMemberNoEditor
            },
            {
              field: 'reqClassify',
              title: '需求分类',
              width: 100,
              dictData: 'REQ_CLASSIFY_CD'
            },
            {
              field: 'devInCharge',
              title: '开发负责人',
              width: 120,
              dictData: 'MEMBER_NO_CD'
            },
            {
              field: 'reqInCharge',
              title: '需求负责人',
              width: 120
            },

            {
              field: 'reqTaskExecutor',
              title: '需求任务执行人',
              width: 120
            },
            {
              field: 'testStartDt',
              title: '测试开始日期',
              editor: this.testStartDtEditor,
              template: this.testStartDtTemplate,
              width: 120
            },
            {
              field: 'testEndDt',
              title: '测试结束日期',
              width: 120
            },
            {
              field: 'currentGeneration',
              title: '当前测试阶段',
              width: 120,
              dictData: 'CURRENT_TEST_GENERATION_CD',
              editor: this.currentTestGenerationEditor
            },
            {
              field: 'testAggregateScheduling',
              title: '测试总进度',
              width: 100,
              format: '{0:p2}'
            }
          ]
        },
        tableGridDataSourceOption: {
          ref: 'reqTestDataSource',
          type: 'json',
          pageSize: 10,
          transportReadUrl: '/service/prjMng/reqmentTestMng/findReqMntTestPage',
          transportCreateUrl: '/service/prjMng/reqmentTestMng/batchSaveReqMntTestDate',
          transportUpdateUrl: '/service/prjMng/reqmentTestMng/batchSaveReqMntTestDate',
          serverPaging: true,
          batch: true,
          dict: ['CURRENT_TEST_GENERATION_CD', 'REQ_CLASSIFY_CD'],
          remoteTransData: {
            MEMBER_NO_CD: {
              transportName: 'prjMemberMngServiceImpl',
              transportMethod: 'prjMemberTransDict',
              transportParam: {}
            },
            TASK_REQ_NO_CD: {
              transportName: 'reqmntTaskServiceImpl',
              transportMethod: 'reqTaskNoTransDict',
              transportParam: {}
            }
          },
          params: {},
          schema: {
            model: {
              id: 'id',
              fields: {
                reqNo: { editable: true, type: 'string', defaultValue: '' },
                testMemberNo: { editable: true, type: 'string', defaultValue: '' },
                reqClassify: { editable: false, type: 'string' },
                devInCharge: { editable: false, type: 'string' },
                reqInCharge: { editable: false, type: 'string' },
                reqTaskExecutor: { editable: false, type: 'string' },
                testStartDt: { editable: true, type: 'string', format: 'yyyy-MM-dd', defaultValue: '' },
                testEndDt: { editable: false, type: 'string', format: 'yyyy-MM-dd' },
                currentGeneration: { editable: false, type: 'string', defaultValue: '01' },
                testAggregateScheduling: { editable: false, type: 'number' }

              }
            },
            data: this.reBuildData,
            total: function(response) {
              return response.data.total
            }
          },
          parameterMap: this.parameterMap
        },
        selectData: []
      }
    },
    mounted() {

    },
    methods: {
      isEmpty(str) {
        if (str === null || typeof str === 'undefined' || str === '') {
          return true
        }
        return false
      },
      reBuildData(response) {
        if (response.data.list && response.data.list.length > 0) {
          response.data.list.forEach(element => {
            if (this.isEmpty(element.testMemberNo)) {
              element.testMemberNo = ''
            }
          })
        }
        return response.data.list
      },
      /* grid*/
      parameterMap(options, operation) {
        if (operation !== 'read' && options.models) {
          const parameterMap = {}
          const models = options.models
          models.forEach(element => {
            element.testStartDt = this.isEmpty(element.testStartDt) ? '' : this.dateFormat(new Date(element.testStartDt), 'yyyy-MM-dd')
            element.testEndDt = this.isEmpty(element.testEndDt) ? '' : this.dateFormat(new Date(element.testEndDt), 'yyyy-MM-dd')
          })
          parameterMap.models = options.models
          // eslint-disable-next-line no-undef
          return kendo.stringify(parameterMap)
        } else {
          let parameterMap = {}
          parameterMap.pageNum = options.page
          parameterMap.pageSize = options.pageSize
          parameterMap = Object.assign(parameterMap, this.deepCopy(this.kendoParamsValue))
          // eslint-disable-next-line no-undef
          return kendo.stringify(parameterMap)
        }
      },
      selectDataItems(res) {
        this.selectData = res
      },
      search(paramVal) {
        this.tableGridDataSourceOption.params = Object.assign(this.tableGridDataSourceOption.params, this.deepCopy(paramVal))
        this.tableGridDataSourceOption.params.pageNum = 1
        this.$refs['ReqTestGrid'].transportReadGrid()
      },
      reset(paramVal) {
        Object.keys(paramVal).forEach(key => {
          if (Array.isArray(paramVal[key])) {
            this.kendoParamsValue[key] = []
          } else {
            this.kendoParamsValue[key] = ''
          }
        })
        this.$refs['ReqTestGrid'].transportReadGrid()
      },
      reqNoEditor(container, options) {
        // eslint-disable-next-line no-undef
        kendo.jQuery('<input required name="' + options.field + '"/>')
          .appendTo(container)
          .kendoMultiColumnComboBox({
            autoBind: true,
            dataTextField: 'reqName',
            dataValueField: 'reqNo',
            filter: 'contains',
            columns: [
              {
                field: 'reqNo',
                title: '需求编号',
                width: 180
              },
              {
                field: 'reqName',
                title: '需求名称',
                width: 250
              }
            ],
            dataSource: {
              type: 'json',
              transport: {
                read: {
                  type: 'POST',
                  url: '/service/prjMng/reqmntTaskMng/findReqMntTaskList'
                },
                parameterMap: function(options, operation) {
                  if (operation !== 'read' && options.models) {
                    // eslint-disable-next-line no-undef
                    return { parameterMap: kendo.stringify(options.models) }
                  } else {
                    const parameterMap = {}
                    parameterMap.currentGeneration = '04'
                    // eslint-disable-next-line no-undef
                    return kendo.stringify(parameterMap)
                  }
                }
              },
              schema: {
                data: function(response) {
                  if (typeof response.data === 'object') {
                    if (JSON.stringify(response.data) === '{}') {
                      return []
                    }
                  }
                  return response.data
                }
              }
            }
          })
      },
      testMemberNoEditor(container, options) {
        // eslint-disable-next-line no-undef
        kendo.jQuery('<input required name="' + options.field + '"/>')
          .appendTo(container)
          .kendoDropDownList({
            autoBind: true,
            filter: 'contains',
            dataTextField: 'dictValNm',
            dataValueField: 'dictVal',
            readonly: true,
            dataSource: {
              type: 'json',
              transport: {
                read: {
                  type: 'POST',
                  url: '/service/prjMng/prjMemberMng/prjMemberTransDict'
                },
                parameterMap: function(options, operation) {
                  if (operation !== 'read' && options.models) {
                    // eslint-disable-next-line no-undef
                    return { models: kendo.stringify(options.models) }
                  } else {
                    // eslint-disable-next-line no-undef
                    return kendo.stringify({ })
                  }
                }
              },
              schema: {
                data: function(response) {
                  if (typeof response.data === 'object') {
                    if (JSON.stringify(response.data) === '{}') {
                      return []
                    }
                  }
                  return response.data
                }
              }
            }
          })
      },
      currentTestGenerationEditor(container, options) {
        // eslint-disable-next-line no-undef
        kendo.jQuery('<input required name="' + options.field + '"/>')
          .appendTo(container)
          .kendoDropDownList({
            autoBind: true,
            dataTextField: 'dictValNm',
            dataValueField: 'dictVal',
            readonly: true,
            dataSource: {
              type: 'json',
              transport: {
                read: {
                  type: 'POST',
                  url: '/service/sysMng/dict/findDictByTypeWithForm'
                },
                parameterMap: function(options, operation) {
                  if (operation !== 'read' && options.models) {
                    // eslint-disable-next-line no-undef
                    return { models: kendo.stringify(options.models) }
                  } else {
                    // eslint-disable-next-line no-undef
                    return kendo.stringify({ dict: 'CURRENT_TEST_GENERATION_CD' })
                  }
                }
              },
              schema: {
                data: function(response) {
                  if (typeof response.data === 'object') {
                    if (JSON.stringify(response.data) === '{}') {
                      return []
                    }
                  }
                  return response.data
                }
              }
            }
          })
      },
      testStartDtEditor(container, options) {
        // eslint-disable-next-line no-undef
        kendo.jQuery('<input required name="' + options.field + '"/>')
          .appendTo(container).kendoDatePicker({
            start: 'month',
            format: 'yyyy-MM-dd',
            dateInput: false
          })
      },
      // testEndDtEditor(container, options) {
      //   // eslint-disable-next-line no-undef
      //   kendo.jQuery('<input required name="' + options.field + '"/>')
      //     .appendTo(container).kendoDatePicker({
      //       start: 'month',
      //       format: 'yyyy-MM-dd',
      //       dateInput: false
      //     })
      // },
      testStartDtTemplate(e) {
        if (!this.isEmpty(e)) {
          return this.isEmpty(e.testStartDt) ? '' : this.dateFormat(new Date(e.testStartDt), 'yyyy-MM-dd')
          // return this.dateFormat(e.testStartDt, 'yyyy-MM-dd')
        } else {
          return e.testStartDt
        }
      }
      // testEndDtTemplate(e) {
      //   if (!this.isEmpty(e)) {
      //     return this.isEmpty(e.testEndDt) ? '' : this.dateFormat(new Date(e.testEndDt), 'yyyy-MM-dd')
      //     // return this.dateFormat(e.testStartDt, 'yyyy-MM-dd')
      //   } else {
      //     return e.testEndDt
      //   }
      // }
    }
  }
</script>

<style>

</style>
